<template>
  <div>
    <div><el-button @click="tj">添加工资资料</el-button></div>
    <div>
      <el-table :data="lst" border style="width: 100%">
        <el-table-column fixed prop="username" label="姓名" width="150">
        </el-table-column>
        <el-table-column prop="atten" label="出勤天数" width="120">
        </el-table-column>
        <el-table-column prop="absent" label="旷工天数" width="120">
        </el-table-column>
        <el-table-column prop="base_pay" label="基本工资" width="120">
        </el-table-column>
        <el-table-column prop="post_pay" label="岗位工资" width="300">
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-drawer title="添加工资资料" :visible.sync="drawer" direction="rtl">
        <span>姓名:<input v-model="obj1.name"/></span><br>
        <span>出勤:<input v-model="obj1.atten"/></span><br>
        <span>旷工:<input v-model="obj1.absent"/></span><br>
        <span>基本工资:<input v-model="obj1.base_pay"/></span><br>
        <span>岗位工资:<input v-model="obj1.post_pay"/></span><br>
        <el-button @click="queren">确认</el-button>
      </el-drawer>
    </div>
    <div>
        <el-button><a href="http://127.0.0.1:8000/static/工资条模板下载.xlsx">下载模板</a></el-button>

          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:8000/works/api/v1/salary/uploading/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>



    </div>
  </div>
</template>

<script>
export default {
  name: "SaralyView",
  data() {
    return {
      lst: [],
      lst1: [],
      drawer: false,
      obj1: {
        name: "",
        atten:'',
        absent:'',
        base_pay:'',
        post_pay:''
      },
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.Saraly();
  },

  beforeDestroy() {},

  methods: {
    Saraly() {
      this.$axios.get("/works/api/v1/salary/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.lst = resp.data.data;
        }
      });
    },
    tj() {
      this.drawer = true;
    },
    queren(){
        this.$axios.post("/works/api/v1/salary/",this.obj1).then((resp) => {
        console.log(resp);
        if (resp.data.code == 201) {
            this.drawer = false
            this.Saraly()
        }
      });
    },
  
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped lang="scss"></style>
